<template>
    <div>
        <el-dialog title="查看详情" :visible.sync="dialogVisible" width="80%">
            <h2 class="titleName">{{ info.headline }}</h2>
            <el-descriptions :column="2" border>
                <el-descriptions-item label="联系人">{{ info.relationRen }}</el-descriptions-item>
                <el-descriptions-item label="联系方式">{{ info.relationPhone }}</el-descriptions-item>
                <el-descriptions-item label="有效期起止">{{ info.startTime }}～{{ info.endTime }}</el-descriptions-item>
                <el-descriptions-item label="共享类型">{{ info.supplyDemand == '0' ? '需求' : '供应' }}</el-descriptions-item>
                <el-descriptions-item label="适用行业">{{ czyFormat(info.applicableIndustry) }}</el-descriptions-item>
                <el-descriptions-item v-if="info.auditorState === '0'" label="状态">待审核</el-descriptions-item>
                <el-descriptions-item v-if="info.auditorState === '1'" label="状态">已发布</el-descriptions-item>
                <el-descriptions-item v-if="info.auditorState === '2'" label="状态">审核驳回</el-descriptions-item>
                <el-descriptions-item v-if="info.auditorState === '3'" label="状态">下架</el-descriptions-item>
                <el-descriptions-item v-if="info.auditorState === '4'" label="状态">草稿</el-descriptions-item>
                <el-descriptions-item v-if="info.auditorState === '5'" label="状态">交接完成</el-descriptions-item>
                <el-descriptions-item label="审核人">{{ info.auditorRen }}</el-descriptions-item>
                <el-descriptions-item label="审核时间">{{ info.auditorTime }}</el-descriptions-item>
                <el-descriptions-item label="审核意见">{{ info.causeRejection }}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions class="contractName" :column="1" border title="合同信息" >
                <!-- <el-descriptions-item label="供给方名称">{{ info.supplierName }}</el-descriptions-item>
                <el-descriptions-item label="合同附件">
                    <span class="changeColor" @click="handleDown(info.contractUrl)">{{ info.contractName }}</span>
                </el-descriptions-item> -->
            </el-descriptions>
            <el-table :data="info.contractDtos" style="width: 100%" border size="small">
                <el-table-column prop="companyName" label="名称" width="180">
                </el-table-column>
                <el-table-column prop="accessoryName" label="合同名称" >
                    <template slot-scope="scope">
                        <span>{{scope.row.accessoryName}}</span>
                        <span @click="handleDown(scope.row.accessoryUrl)" class="changeColor">下载</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="detailItem">
                <h3>关键字</h3>
                <p>{{ info.keywordes }}</p>
            </div>
            <div class="detailItem">
                <h3>描述</h3>
                <p>{{ info.contentNeed }}</p>
            </div>
            <div class="detailItem" v-if="info.supplyDemand == '1'">
                <h3>资源详情</h3>
                <p v-html="info.resourceDetails"></p>
            </div>
            <div class="detailItem" v-if="info.supplyDemand == '0'">
                <h3>备注</h3>
                <p>{{ info.remark }}</p>
            </div>
            <div class="detailItem" v-if="info.accessoryDtos">
                <h3>附件</h3>
                <p v-if="info.accessoryDtos.length == 0">暂无</p>
                <p v-else class="detailFu" @click="handleDown(item.accessoryUrl)" v-for="item in info.accessoryDtos"
                    :key="item.id">{{ item.accessoryName }}</p>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
            </span>

        </el-dialog>
        <!-- 上传合同 -->
        <ContractDialog ref="contrac" />
    </div>
</template>
<script>
import { resourceDetail } from "@/request/api/resource"
import ContractDialog from "./contractDialog.vue"
import { keyVal } from "@/request/api/link"
export default {
    components: {
        ContractDialog
    },
    data() {
        return {
            dialogVisible: false,
            innerVisible: false,
            info: {},
            form: {
                id: "", //
                supplierName: "", //供给方名称
                contractName: "",//合同名称
                contractUrl: "" //合同附件URL
            },
            formLabelWidth: '100px',
            fileUploadUrl: '/dev-api/file/upload/uploadNotQR',
            rules: {
                supplierName: [
                    { required: true, message: '请输入供给方名称', trigger: 'blur' },
                ],
                contractUrl: [
                    { required: true, message: '请上传合同附件', trigger: 'change' },
                ],
            },
            fileList: [],
            loading: false,
            userData: [],
            industryData: []
        }
    },
    methods: {
        open(info) {
            this.getIndustryType()
            this.dialogVisible = true
            this.getDetail(info)
            this.form.id = info
        },
        // 查看详情
        getDetail(id) {
            resourceDetail(id).then(res => {
                if (res.data.code === 200) {
                    this.info = res.data.result
                }
            })
        },
        // 上传合同点击
        handleContract() {
            this.$refs.contrac.open(this.info.id)
        },
        // 下载
        handleDown(url) {
            window.open(url)
        },
        // 获取适用行业
        getIndustryType() {
            keyVal('applicable_industry ').then(res => {
                console.log(res, '1111')
                if (res.data.code === 200) {
                    this.industryData = res.data.result.items
                }
            })
        },
        czyFormat(row) {
            var name = "";
            this.industryData.forEach(function (item, index) {
                if (row == item.value) {
                    name = item.label;
                }
            });
            return name;
        },
    }
}
</script>
<style lang="less" scoped>
/deep/.el-descriptions-item__label {
    width: 14%;
}

/deep/.el-descriptions-item__content {
    width: 31%;
}
</style>
<style lang="less">
.detailContent {

    // margin-top:20px;
    img {
        max-width: 100%;
        display: block;
    }
}

.tupian {
    margin-right: 10px;
}

.uploadBtn {
    margin: 12px 0 0;
}

.changeColor {
    color: #409eff;
    text-decoration: underline;
}

.contractName {
    margin-top: 12px;
}

.titleName {
    color: #333;
    text-align: center;
    margin-bottom: 20px;
}

.detailItem h3 {
    margin: 15px 0;
    display: inline-block;
    color: #333;
    border-bottom: 2px solid #409eff;
}

.detailFu {
    color: #409eff;
    text-decoration: underline;
}
.changeColor{
    color: #409eff;
    margin-left:20px;
}
</style>

